<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.orderCode" clearable placeholder="订单编号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <!--<el-select v-model="query.orderStatus" clearable filterable placeholder="订单状态" style="width: 185px;" class="filter-item" @change="crud.toQuery" >
          <el-option v-for="item in dict.order_status"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value" />
        </el-select>-->
        <el-select
          v-model="query.productType"
          clearable
          filterable
          placeholder="产品类型"
          style="width: 185px;"
          class="filter-item"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in productTypes"
            :key="item.id"
            :label="item.productTypeName"
            :value="item.productType"
          >
            <span style="float: left">{{ item.productTypeName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.productType }}</span>
          </el-option>
        </el-select>

        <el-select
          v-model="query.productCode"
          clearable
          filterable
          placeholder="产品型号"
          style="width: 220px;"
          class="filter-item"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in products"
            :key="item.id"
            :label="item.productName"
            :value="item.productCode"
          >
            <span style="float: left">{{ item.productName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.productCode }}</span>
          </el-option>
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="800px">
        <el-form :inline="true" ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="订单编号" prop="orderCode">
            <el-input v-model="form.orderCode"
                      style="width: 285px;" />
          </el-form-item>
          <el-form-item label="产线编号" prop="lineCode">
            <el-select v-model="form.lineCode" style="width: 285px" filterable placeholder="请选择">
              <el-option
                v-for="item in lines"
                :key="item.id"
                :label="item.modelName"
                :value="item.modelCode" >
                <span style="float: left">{{ item.modelName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.modelCode }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品型号"  prop="productCode">
            <el-select @change="productCodeChange" v-model="form.productCode" style="width: 285px" filterable placeholder="请选择">
              <el-option
                v-for="item in products"
                :key="item.id"
                :label="item.productName"
                :value="item.productCode" >
                <span style="float: left">{{ item.productName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.productCode }}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="需求数量" prop="requiredQty">
            <el-input-number v-model="form.requiredQty" style="width: 285px" :step="1" step-strictly></el-input-number>
          </el-form-item>
          <el-form-item label="计划开始" prop="planStart">
            <el-date-picker v-model="form.planStart" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width: 285px;" />
          </el-form-item>
          <el-form-item label="计划结束" prop="planEnd">
            <el-date-picker v-model="form.planEnd" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width: 285px;" />
          </el-form-item>
          <el-form-item label="计划员" prop="planner">
            <el-input v-model="form.planner" style="width: 285px;" />
          </el-form-item>
          <el-form-item label="客户名称" prop="clientName">
            <el-input v-model="form.clientName" style="width: 285px;" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.remark" :rows="3" type="textarea" style="width: 670px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="0" label="未生成">
        </el-tab-pane>
        <el-tab-pane name="1" label="已生成">
        </el-tab-pane>
        <el-tab-pane name="2" label="已完成">
        </el-tab-pane>
      </el-tabs>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderCode" label="订单编号" width="200px;" align="center"/>
        <el-table-column prop="orderStatus" label="订单状态" width="100px;" align="center">
          <template slot-scope="scope">
            <el-tag :type="getOrderStatusColour(scope.row.orderStatus)">{{ dict.label.order_status[scope.row.orderStatus] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="productType" label="产品类型" width="100px;" align="center">
          <template slot-scope="scope">
            {{getProductTypeName(scope.row.productType)}}
          </template>
        </el-table-column>
        <el-table-column prop="productCode" label="产品型号" width="150px;" align="center"/>
        <el-table-column label="产品名称" width="150px;" align="center">
          <template slot-scope="scope">
            {{getProductName(scope.row.productCode)}}
          </template>
        </el-table-column>
        <el-table-column prop="requiredQty" label="需求数量"  width="100px;" align="center"/>
        <el-table-column prop="lineCode" label="产线编号"  width="100px;" align="center"/>
        <el-table-column prop="planStart" label="计划开始"  width="150px;" align="center"/>
        <el-table-column prop="planEnd" label="计划结束" width="150px;" align="center"/>
        <el-table-column prop="planner" label="计划员" width="100px;" align="center"/>
        <el-table-column prop="clientName" label="客户名称" width="150px;" align="center"/>
        <el-table-column prop="orderSorts" label="订单来源" width="100px;" align="center">
          <template slot-scope="scope">
            {{ dict.label.order_sorts[scope.row.orderSorts] }}
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="创建人" width="100px;" align="center"/>
        <el-table-column prop="createTime" label="创建时间" width="150px;" align="center"/>
        <el-table-column prop="updateBy" label="更新人" width="100px;" align="center"/>
        <el-table-column prop="updateTime" label="更新时间" width="150px;" align="center"/>
        <el-table-column prop="remark" label="描述" width="250px;" align="center"/>
        <el-table-column v-if="checkPer(['admin','planOrder:edit','planOrder:del'])" fixed="right" label="操作" width="250px" align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" :disabledEdit="scope.row.orderStatus != '0'" :disabledDle="scope.row.orderStatus != '0'">
              <template slot="view">
                <el-popconfirm title="确定把当前工单生成工单吗？"  @confirm="generate(scope.row)">
                  <el-button slot="reference" size="mini" :disabled="scope.row.orderStatus != '0'">生成工单</el-button>
                </el-popconfirm>
              </template>
            </udOperation>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudPlanOrder from '@/api/plan/planOrder'

import crudProductType from '@/api/product/productType'
import crudProductModel from '@/api/product/productModel'
import crudFactoryModel from "@/api/factory/factoryModel";

import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, orderCode: null, orderStatus: '0', productCode: null, productType: null, requiredQty: null, lineCode: null, planStart: null, planEnd: null, planner: null, clientName: null, orderSorts: '2', remark: null, createBy: null, createTime: null, updateBy: null, updateTime: null }
export default {
  name: 'PlanOrder',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['order_status', 'order_sorts'],
  cruds() {
    return CRUD({
      title: '订单',
      url: 'api/planOrder',
      idField: 'id',
      sort: 'id,desc',
      optShow: {
        add: true,
        edit: true,
        del: true,
        download: false,
        reset: true,
        import: true
      },
      crudMethod: { ...crudPlanOrder }}
      )
  },
  data() {
    return {
      activeName: '0',
      orderStatus: '0',
      productTypes: [],
      products: [],
      lines:[],
      permission: {
        add: ['admin', 'planOrder:add'],
        edit: ['admin', 'planOrder:edit'],
        del: ['admin', 'planOrder:del']
      },
      rules: {
        orderCode: [
          { required: true, message: '订单编号不能为空，固定长度为7位', trigger: 'blur' },
          { max: 7, message: "订单号长度大于7，固定长度为7位", trigger: "blur" },
          { min: 7, message: "订单号长度小于7，固定长度为7位", trigger: "blur" }
        ],
        orderStatus: [
          { required: true, message: '订单状态不能为空', trigger: 'blur' }
        ],
        productCode: [
          { required: true, message: '产品型号不能为空', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '产品类型不能为空', trigger: 'blur' }
        ],
        requiredQty: [
          { required: true, message: '需求数量不能为空', trigger: 'blur' }
        ],
        lineCode: [
          { required: true, message: '产线编号不能为空', trigger: 'blur' }
        ],
        planStart: [
          { required: true, message: '计划开始不能为空', trigger: 'blur' }
        ],
        planEnd: [
          { required: true, message: '计划结束不能为空', trigger: 'blur' }
        ],
        planner: [
          { required: true, message: '计划员不能为空', trigger: 'blur' }
        ],
        clientName: [
          { required: true, message: '客户名称不能为空', trigger: 'blur' }
        ],
        orderSorts: [
          { required: true, message: '订单来源不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'id', display_name: 'ID' },
        { key: 'orderCode', display_name: '订单编号' },
        { key: 'orderStatus', display_name: '订单状态' },
        { key: 'productCode', display_name: '产品型号' },
        { key: 'productType', display_name: '产品类型' },
        { key: 'requiredQty', display_name: '需求数量' },
        { key: 'lineCode', display_name: '产线编号' },
        { key: 'planStart', display_name: '计划开始' },
        { key: 'planEnd', display_name: '计划结束' },
        { key: 'planner', display_name: '计划员' },
        { key: 'clientName', display_name: '客户名称' },
        { key: 'orderSorts', display_name: '订单来源' },
        { key: 'remark', display_name: '描述' },
        { key: 'createBy', display_name: '创建人' },
        { key: 'updateBy', display_name: '更新人' }
      ]
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query.orderStatus = this.orderStatus;
      return true
    },
    productCodeChange(value){
      this.products.forEach(res =>{
        if(res.productCode == value){
          this.crud.form.productType = res.productType;
        }
      })
    },
    getOrderStatusColour(value){
      if(value == '0'){
        return 'info'
      } else if(value == '1'){
        return ''
      } else if(value == '2'){
        return 'success'
      }
      return 'info'
    },
    getProductName(value){
      let name = '';
      this.products.forEach(res =>{
        if(value == res.productCode){
          name = res.productName;
          return;
        }
      })
      return name;
    },
    getProductTypeName(value){
      let name = '';
      this.productTypes.forEach(res =>{
        if(value == res.productType){
          name = res.productTypeName;
          return;
        }
      })
      return name;
    },
    handleClick(value){
      this.orderStatus = value.name;
      if(this.orderStatus != '0'){
        this.crud.optShow.import = false;
      }else{
        this.crud.optShow.import = true;
      }
      this.crud.toQuery();
    },
    generate(order){
      this.crud.loading = true;
      crudPlanOrder.generate(order).then(res =>{
        this.crud.loading = false;
        this.$notify.success({
          title: '成功',
          message: "生成工单成功！"
        });
        this.crud.toQuery();
      }).catch(err =>{
        this.crud.loading = false;
        this.$notify.error({
          title: '错误',
          message: err.response.data.message
        });
      });
    }
  },
  mounted() {
    crudProductType.list().then(res =>{
      this.productTypes = res;
    })

    crudProductModel.list().then(res =>{
      this.products = res;
    });

    crudFactoryModel.getModels({modelType: '2'}).then(res =>{
      this.lines = res.content;
    });
  }
}
</script>

<style scoped>

</style>
